<template>
  <basic-table
    v-if="id"
    ref="dataTable"
    url="/ms-warehouse-order/basicData/findCargoProductList"
    showCheckbox
    title="产品信息"
    :initParams ="{
      cargoOwnerId: id
    }"
    :columns="columns"
  >
    <template slot="column" >
      <el-table-column  fixed="right" align="center" width="100px" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="show(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </template>
    <template v-if="canEdit" slot="buttons">
      <el-button type="primary" @click.prevent="productionSelectModalVisible = true">新增</el-button>
      <el-button type="danger" @click.prevent="delProduction">移除</el-button>
      <ProductionSelectModal @addProduction="addProduction" ref="ProductionSelectModal" :visible.sync="productionSelectModalVisible"></ProductionSelectModal>
    </template>
  </basic-table>
</template>
<script>
import ProductionSelectModal from '@/views/oms/basicData/owner/ProductionSelectModal'
import {dotData, alert, arrayColumn} from '@/utils'
import {unixTimestampFilter} from '@/filters'
export default {
  components: {
    ProductionSelectModal
  },
  props: {
    canEdit: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      productionSelectModalVisible: false,
      columns: [
        {label: '厂家名称', data: 'manufacturersName'},
        {
          label: '商品编号',
          data: 'productOutNo'
        },
        {
          label: '商品名称',
          data: 'productName'
        },
        {label: '商品大类', data: 'bigClass'},
        {label: '商品小类', data: 'middleClass'},
        {label: '总体积(m³)', data: 'totalVolume'},
        {label: '总重量(kg)', data: 'totalWeight'},
        {
          label: '总包件数',
          data: 'totalPackage'
        },
        {label: '存储类型', data: 'storageType'},
        {label: '规格', data: 'standard'},
        {label: '单位', data: 'productUnit'},
        {label: '操作人', data: 'founder'},
        {
          label: '添加时间',
          data: 'foundDate',
          render(data, full) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  methods: {
    // 移除产品
    delProduction() {
      let selectedData = this.$refs.dataTable.getSelected()
      if (Array.isArray(selectedData) && selectedData.length > 0) {
        let productId = arrayColumn(selectedData, 'id')
        let data = {
          cargoOwnerId: this.id,
          productId
        }
        this.$ajax.post('/ms-warehouse-order/basicData/deleteProductForCargo', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            alert('删除成功', undefined, 'success')
            this.refresh()
          }
        })
      } else {
        alert('请选择产品信息')
      }
    },
    // 添加产品信息
    addProduction(productions) {
      let productId = arrayColumn(productions, 'id')
      let data = {
        cargoOwnerId: this.id,
        productId
      }
      this.$ajax.post('/ms-warehouse-order/basicData/addProductForCargo', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          alert('添加成功', undefined, 'success')
          this.refresh()
        }
      })
    },
    // 产品详情
    show(data) {
      this.$router.push({path: '/ss-oms/basic-data/production/show/' + data.id})
    },
    refresh() {
      this.$refs.dataTable.search()
    }
  }
}
</script>
